<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true" @leftClick="goBack" title="会员介绍"></u-navbar>
		<view class="flex align-center justify-center margin-top-lg">
			<view
				style="width: 90%;height: 400rpx;background: #F7DBAB;border: 0px;border-radius: 10rpx;position: relative;"
				class="padding-lg">
				<view class="flex align-center justify-between">
					<text class="text-tea-title text-xl text-bold ">棋牌室超级会员</text>
					<text class="margin-left-xs text-sm text-tea-title">未开通</text>
				</view>
				<view class="margin-top-xs text-tea-title text-sm">会员权益：</view>
				<view class="margin-top-xs text-tea-title text-sm">1、所有门店可享受会员价</view>
				<view class="margin-top-xs text-tea-title text-sm">2、充值享受赠送余额</view>
				<view style="position: absolute;bottom: 0px;left: 0px;width: 100%;">
					<view class="padding-tb-sm padding-lr-lg">
						<view class="text-tea-title text-sm">开通条件</view>
						<view class="text-tea-title text-sm margin-top-xs">
							1.单次充值满{{trem.once}}元
						</view>
						<view class="text-tea-title text-sm">
							1.累计消费满{{trem.sum}}元 您还差
							<text class="text-blue text-lg text-bold margin-lr-xs">{{trem.yu}}</text>
							元
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="margin-lr-lg margin-top-sm bg-white radius padding-lg">
			<text class="text-bold text-lg">服务条款</text>
			<view class="margin-top-lg">
				<view class="text-gray text-sm">1.会员卡一经售出概不退换，购买前请自行确认</view>
				<view class="text-gray text-sm">2.最终解释权归店面所有</view>
			</view>
		</view>

		<view style="position: fixed;bottom: 0px;left: 0px;width: 100%;">
			<view class="flex align-center justify-center">
				<button class="cu-btn bg-tea" style="width: 88%;" @click="openMember">立即开通</button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trem: {},
				changeOrderStatusTotal: 0,
			}
		},
		created() {
			this.getChangeMemberTerm();
		},
		methods: {
			//获取成为会员的条件
			getChangeMemberTerm() {
				uni.showLoading();
				uni.$u.http.post('/Customer/GetChangeMemberTrem').then(res => {
					this.trem = res.data;
				});
			},
			goBack() {
				uni.navigateBack();
			},
			//开通会员
			openMember() {
				uni.showLoading();
				uni.$u.http.post('/Customer/OpenMember').then(res => {
					this.turnUpWxPay(res);
				});
			},
			turnUpWxPay(res) {
				let that = this;
				this.out_trade_no = res.data.out_trade_no; //支付订单
				uni.requestPayment({
					provider: 'wxpay', //支付类型-固定值
					timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
					nonceStr: res.data.nonceStr, // 随机字符串
					package: res.data.package, // 固定值
					signType: res.data.signType, //固定值
					paySign: res.data.paySign, //签名
					success: function(res) {
						//this.callBackPayResult();
						console.log(res);
						uni.showLoading({
							title: '支付结果查询中',
						})
						that.changeOrderStatusTotal = 0;
						that.timeIntervalId = setInterval(that.callBackPayResult, 3000);
					},
					fail: function(err) {
						console.log(err);
						that.$refs.uToast.show({
							message: '支付失败',
							type: 'error',
							position: 'top'
						});
					}
				});
			},
			//通知后端手动查询订单结果
			callBackPayResult() {
				this.changeOrderStatusTotal++;
				if (this.changeOrderStatusTotal >= 10) {
					clearInterval(this.timeIntervalId);
					uni.hideLoading();
					this.$refs.uToast.show({
						message: '查询支付结果超时！',
						type: 'error',
						position: 'top'
					});
					return;
				}
				//params.storeId
				uni.$u.http.post('/WxPayCallBack/ZhuDong', {
					out_trade_no: this.out_trade_no
				}).then(res => {
					if (res.data == 1) {
						clearInterval(this.timeIntervalId);
						uni.hideLoading();
						this.$refs.uToast.show({
							message: '支付成功！',
							type: 'success',
							position: 'top'
						});
						uni.switchTab({
							url: '/pages/index/usercenter'
						});
						return;
					}
				})
			},

		}
	}
</script>

<style scoped>
	.bottom-box {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text-tea-title {
		color: #B48E64;
	}
</style>
